<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>账号管理</title>
    <link type="favicon" rel="shortcut icon" href="./static/img/favicon.ico" />
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/common.css">
    <link rel="stylesheet" href="./static/less/root.css">
    <link href="./static/css/spop.min.css" rel="stylesheet"/>
    <script src="./static/js/Syunew6.js"></script>
    <script src="./static/js/isLogin.js"></script>
</head>
<body>
    <div id="root" class="root-box common-box">
        <div class="head-box">
            <div class="logo-box">
                <img class="logo" src="./static/img/logo_1.png" alt="">
                <span class="title">成都杜甫草堂博物馆综合信息管理平台</span>
            </div>
            <div class="user-box">
                <div class="name">{{userData.userName}}，欢迎您</div>
                <div class="logout">
                    <span @click="logout" class="cus">
                        <i class="glyphicon glyphicon-log-out"></i>
                        <span>登出</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="address-box">
                <div class="address">
                    <a class="href" href="/index.html">首页</a>
                    <i class="glyphicon glyphicon-menu-right right"></i>
                    <span>账号管理</span>
                </div>
                <div class="time">
                    {{date + '&nbsp;星期' + week + '&nbsp;' + time}}
                </div>
            </div>
            <!-- tab大屏 -->
            <div class="tab">
                <p class="title" :class="tabCurrent == 1 ? 'current' : 'cus'" @click="tabClick(1)" v-if="menuConfig('添加账号')">添加账号</p>
                <p class="title" :class="tabCurrent == 2 ? 'current' : 'cus'" @click="tabClick(2)" v-if="menuConfig('账号列表')">账号列表</p>
                <p class="title" :class="tabCurrent == 3 ? 'current' : 'cus'" @click="tabClick(3)" v-if="menuConfig('新增用户组')">新增用户组</p>
                <p class="title" :class="tabCurrent == 4 ? 'current' : 'cus'" @click="tabClick(4)" v-if="menuConfig('用户组管理')">用户组管理</p>
            </div>
            <!-- tab小屏 -->
            <div class="container tab2">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="true">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand">{{tabs[tabCurrent]}}</a>
                </div>
                <nav id="bs-navbar" class="navbar-collapse collapse in" aria-expanded="true">
                    <ul class="nav navbar-nav">
                        <li v-if="menuConfig('添加账号')">
                            <a :class="tabCurrent == 1 ? 'current' : ''" @click="tabClick(1)">添加账号</a>
                        </li>
                        <li v-if="menuConfig('账号列表')">
                            <a :class="tabCurrent == 2 ? 'current' : ''" @click="tabClick(2)">账号列表</a>
                        </li>
                        <li v-if="menuConfig('新增用户组')">
                            <a :class="tabCurrent == 3 ? 'current' : ''" @click="tabClick(3)">新增用户组</a>
                        </li>
                        <li v-if="menuConfig('用户组管理')">
                            <a :class="tabCurrent == 4 ? 'current' : ''" @click="tabClick(4)">用户组列表</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="con-box">
                <!-- 添加账号 -->
                <div class="clearfix" v-if="tabCurrent == 1">
                    <form class="form-horizontal col-lg-8 col-md-10 col-sm-12 col-xs-12 form">
                        <div class="form-group">
                            <label for="name" class="col-sm-3 col-md-2 control-label">用户名</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="text" class="form-control" id="name" v-model = "addUserForm.name" ref="addName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 col-md-2 control-label">选择头像</label>
                            <div class="col-sm-9 col-md-10">
                                <div class="img-box">
                                    <div class="one" :class="userSelectImg == 'head.png' ? 'current' : ''" @click="imgSelect('head.png')">
                                        <img :src="baseUrl + 'head.png'">
                                    </div>
                                    <div class="one" :class="userSelectImg == 'head01 (1).jpg' ? 'current' : ''" @click="imgSelect('head01 (1).jpg')">
                                        <img :src="baseUrl + 'head01 (1).jpg'">
                                    </div>
                                    <div class="one" :class="userSelectImg == 'head01 (2).jpg' ? 'current' : ''" @click="imgSelect('head01 (2).jpg')">
                                        <img :src="baseUrl + 'head01 (2).jpg'">
                                    </div>
                                    <div class="one" :class="userSelectImg == 'head01 (3).jpg' ? 'current' : ''" @click="imgSelect('head01 (3).jpg')">
                                        <img :src="baseUrl + 'head01 (3).jpg'">
                                    </div>
                                    <div class="one" :class="userSelectImg == 'head01 (4).jpg' ? 'current' : ''" @click="imgSelect('head01 (4).jpg')">
                                        <img :src="baseUrl + 'head01 (4).jpg'">
                                    </div>
                                    <div class="one" :class="userSelectImg == 'head01 (5).jpg' ? 'current' : ''" @click="imgSelect('head01 (5).jpg')">
                                        <img :src="baseUrl + 'head01 (5).jpg'">
                                    </div>
                                    <div class="one" v-if="userImg" :class="userSelectImg == userImg ? 'current' : ''" @click="imgSelect(userImg)">
                                        <img :src="baseUrl + userImg">
                                    </div>
                                    <label for="exampleInputFile" class="one filebtn cus">
                                        <input type="file" class="update" id="exampleInputFile" accept="image/*" @change="userUpdateImg($event)">
                                        自定义
                                    </label>
                                </div>
                                <!-- <div class="clearfix"></div> -->
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="rel_name" class="col-sm-3 col-md-2 control-label">真实姓名</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="text" class="form-control" id="rel_name" v-model = "addUserForm.rel_name" ref="addRelname">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-3 col-md-2 control-label">密码</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="password" class="form-control" id="password" v-model = "addUserForm.password" ref="addPassword">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="confirm_password" class="col-sm-3 col-md-2 control-label">确认密码</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="password" class="form-control" v-model="confirm" id="confirm_password" ref="addConfirm">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 col-md-2 control-label">所属用户组</label>
                            <div class="col-sm-9 col-md-10">
                                <select class="form-control" v-model="addUserForm.group" ref="addUserGroup">
                                    <option style="display: none" value="">--请选择--</option>
                                    <option v-for="(item,i) in groupList" :key="i" :value="{'groupName':item.groupName,'groupId':item.id}">{{item.groupName}}</option>
                                    <!-- <option value="1">普通管理员</option>
                                    <option value="2">信息发布员</option>
                                    <option value="3">信息录入员</option> -->
                                </select>
                            </div>
                        </div>
                    </form>
                    <div class="btn-box col-lg-8 col-md-10 col-sm-12 col-xs-12">
                        <div class="btn submit" @click="addUser">保存</div>
                    </div>
                </div>
                <!-- 账号列表 -->
                <div class="clearfix" v-if="tabCurrent == 2">
                    <!-- <form class="form-inline form">
                        <div class="form-group">
                            <label for="name1">用户名</label>
                            <input type="text" class="form-control" id="name1">
                        </div>
                        <div class="form-group">
                            <label for="name2">真实姓名</label>
                            <input type="text" class="form-control" id="name2">
                        </div>
                    </form>
                    <div class="btn-box col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="btn submit">筛选</div>
                    </div> -->
                    <div class="table-box table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>用户名</th>
                                    <th>真实姓名</th>
                                    <th>所属用户组</th>
                                    <th>创建管理员</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,i) in userList" :key="i">
                                    <td class="active">{{item.id}}</td>
                                    <td class="warning">{{item.userName}}</td>
                                    <td class="active">{{item.realName}}</td>
                                    <td class="info">{{item.groupName}}</td>
                                    <td class="warning">{{item.createName}}</td>
                                    <td class="success">{{item.createTime}}</td>
                                    <td class="info">
                                        <span class="u_btn cus" data-toggle="modal" data-target="#editUser" @click="editUserConfig(item)">修改</span>
                                        <span class="u_btn cus popconfirm" id="popconfirm" data-toggle='modal' data-target="#delModal" @click="delUser(item.id)">删除</span>
                                    </td>
                                </tr>
                                <!-- <tr>
                                    <td class="active">1</td>
                                    <td class="warning">胡奥</td>
                                    <td class="danger">张三</td>
                                    <td class="info">普通管理员</td>
                                    <td class="active">admin</td>
                                    <td class="success">2018-12-26</td>
                                    <td class="info">
                                        <span class="u_btn cus" data-toggle="modal" data-target="#editUser">修改</span>
                                        <span class="u_btn cus">删除</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="active">1</td>
                                    <td class="warning">胡奥</td>
                                    <td class="danger">张三</td>
                                    <td class="info">普通管理员</td>
                                    <td class="active">admin</td>
                                    <td class="success">2018-12-26</td>
                                    <td class="info">
                                        <span class="u_btn cus" data-toggle="modal" data-target="#editUser">修改</span>
                                        <span class="u_btn cus">删除</span>
                                    </td>
                                </tr> -->
                                
                            </tbody>
                        </table>
                        <nav aria-label="Page navigation" class="u_pager hidden-xs">
                            <span class="total">总计{{total}}人</span>
                            <ul class="pagination">
                                <li :class="currentPage === 1 ? 'disabled' : ''" @click="topPage">
                                    <a href="javascript:void(0);" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <!-- <li v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)"><a href="javascript:void(0);">{{i}}</a></li> -->
                                <li v-show="userPages.length < 10" v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)"><a href="javascript:void(0);">{{i}}</a></li>
                                <li v-show="userPages.length > 9" v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)">
                                    <a href="javascript:void(0);" v-if="i == 1 || i == 2 || i == currentPage || i == (currentPage - 1) || i == (currentPage + 1) || i == (userPages.length) || i == (userPages.length - 1)">{{i}}</a>
                                    <a class="u_page_n" href="javascript:void(0);" v-else-if="i == (currentPage - 2)|| i == (currentPage + 2)"><span aria-hidden="true">...</span></a>
                                </li>
                                <li :class="currentPage === userPages[userPages.length-1] ? 'disabled' : ''" @click="nextPage">
                                    <a href="javascript:void(0);" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                        <nav class="u_pager visible-xs-block">
                            <ul class="pager">
                                <li @click="topPage" :class="currentPage === 1 ? 'disabled' : ''"><a href="javascript:void(0);">上一页</a></li>
                                <li @click="nextPage" :class="currentPage === userPages[userPages.length-1] ? 'disabled' : ''"><a href="javascript:void(0);">下一页</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <!-- 新增用户组 -->
                <div class="clearfix" v-if="tabCurrent == 3">
                    <form class="form-horizontal col-lg-8 col-md-10 col-sm-12 col-xs-12 form">
                        <div class="form-group">
                            <label for="rootName" class="col-sm-3 col-md-2 control-label">用户组名称</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="text" class="form-control" id="rootName" v-model="addUserGroupName" ref="rootName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 col-md-2 control-label">用户组权限</label>
                            <div class="col-sm-9 col-md-10 table-responsive">
                                <!-- <label class="checkbox-inline" v-for="(item,i) in menuList" :key="i">
                                    <input type="checkbox" :id="item.title" :value="item.title" v-model="addRootMenuList"> {{item.title}}
                                </label> -->
                                <table class="table table-bordered table-condensed">
                                    <tbody>
                                        <tr>
                                            <th style="width:160px">一级权限</th>
                                            <th>二级权限</th>
                                        </tr>
                                        <tr v-for="(item,i) in menuList" :key="i">
                                            <td>
                                                <label class="checkbox-inline">
                                                    <input type="checkbox" :id="item.title" :value="item.title" :key="item.title" v-model="addRootMenuList"> {{item.title}}
                                                </label>
                                            </td>
                                            <td>
                                                <label class="checkbox-inline" v-for="second in item.menuList" :key="second.title">
                                                    <input type="checkbox" :id="second.title" :value="second.title" v-model="addRootMenuList"> {{second.title}}
                                                </label>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="tips">
                                    提示：1、选择二级权限时必须选择对应的一级权限，否则不生效！<br>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="btn-box col-lg-8 col-md-10 col-sm-12 col-xs-12">
                        <div class="btn submit" @click="saveUserGroup">保存</div>
                    </div>
                </div>
                <!-- 用户组管理 -->
                <div class="clearfix" v-if="tabCurrent == 4">
                    <div class="table-box table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>名称</th>
                                    <th style="width: 800px">权限</th>
                                    <th>创建管理员</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,i) in groupList">
                                    <td class="active">{{item.id}}</td>
                                    <td class="warning">{{item.groupName}}</td>
                                    <td class="danger">{{item.userAuthority}}</td>
                                    <td class="info">admin</td>
                                    <td class="success">{{item.createTime}}</td>
                                    <td class="info">
                                        <span class="u_btn cus" data-toggle="modal" data-target="#editRoot" @click="editGroup(item)">修改</span>
                                        <span class="u_btn cus" @click="delGroup(item.id)">删除</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            Copyright 成都杜甫草堂博物馆
        </div>

        <!-- 修改账户模态框 -->
        <div class="modal" id="editUser" tabindex="-1" role="dialog" aria-labelledby="editUser">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改账号</h4>
                </div>
                <div class="modal-body clearfix">
                    <form class="form-horizontal col-lg-8 col-md-10 col-sm-12 col-xs-12 form">
                        <div class="form-group">
                            <label for="name1" class="col-sm-3 col-md-2 control-label">用户名</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="text" class="form-control" id="name1" v-model="editUserForm.name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 col-md-2 control-label">选择头像</label>
                            <div class="col-sm-9 col-md-10">
                                <div class="img-box">
                                    <div class="one" :class="userEditSelectImg == 'head.png' ? 'current' : ''" @click="imgSelect1('head.png')">
                                        <img :src="baseUrl + 'head.png'">
                                    </div>
                                    <div class="one" :class="userEditSelectImg == 'head01 (1).jpg' ? 'current' : ''" @click="imgSelect1('head01 (1).jpg')">
                                        <img :src="baseUrl + 'head01 (1).jpg'">
                                    </div>
                                    <div class="one" :class="userEditSelectImg == 'head01 (2).jpg' ? 'current' : ''" @click="imgSelect1('head01 (2).jpg')">
                                        <img :src="baseUrl + 'head01 (2).jpg'">
                                    </div>
                                    <div class="one" :class="userEditSelectImg == 'head01 (3).jpg' ? 'current' : ''" @click="imgSelect1('head01 (3).jpg')">
                                        <img :src="baseUrl + 'head01 (3).jpg'">
                                    </div>
                                    <div class="one" :class="userEditSelectImg == 'head01 (4).jpg' ? 'current' : ''" @click="imgSelect1('head01 (4).jpg')">
                                        <img :src="baseUrl + 'head01 (4).jpg'">
                                    </div>
                                    <div class="one" :class="userEditSelectImg == 'head01 (5).jpg' ? 'current' : ''" @click="imgSelect1('head01 (5).jpg')">
                                        <img :src="baseUrl + 'head01 (5).jpg'">
                                    </div>
                                    <div class="one" v-if="userImg" :class="userEditSelectImg == userImg ? 'current' : ''" @click="imgSelect1(userImg)">
                                        <img :src="baseUrl + userImg">
                                    </div>
                                    <label for="exampleInputFile1" class="one filebtn cus">
                                        <input type="file" class="update" id="exampleInputFile1" accept="image/*" @change="userUpdateImg($event)">
                                        自定义
                                    </label>
                                </div>
                                <!-- <div class="clearfix"></div> -->
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="rel_name1" class="col-sm-3 col-md-2 control-label">真实姓名</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="text" class="form-control" id="rel_name1" v-model="editUserForm.rel_name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password1" class="col-sm-3 col-md-2 control-label">密码</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="password" class="form-control" id="password1" v-model="editUserForm.password" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="confirm_password1" class="col-sm-3 col-md-2 control-label">确认密码</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="password" class="form-control" id="confirm_password1" v-model="confirm1">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 col-md-2 control-label">所属用户组</label>
                            <div class="col-sm-9 col-md-10">
                                <select class="form-control" v-model="editUserForm.group" ref="editUserGroup">
                                    <option style="display: none" value="">--请选择--</option>
                                    <option v-for="(item,i) in groupList" :key="i" :selected="i===0 ? true : false" :value="{'groupName':item.groupName,'groupId':item.id}">{{item.groupName}}</option>
                                    <!-- <option value="1">普通管理员</option>
                                    <option value="2">信息发布员</option>
                                    <option value="3">信息录入员</option> -->
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" @click="cancleEdit">取消</button>
                    <button type="button" class="btn btn-primary" @click="editSubmit">保存更改</button>
                </div>
                </div>
            </div>
        </div>
        <!-- 修改用户组模态框 -->
        <div class="modal fade" id="editRoot" tabindex="-1" role="dialog" aria-labelledby="editRoot">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改用户组</h4>
                </div>
                <div class="modal-body clearfix">
                    <form class="form-horizontal col-lg-8 col-md-10 col-sm-12 col-xs-12 form">
                        <div class="form-group">
                            <label for="rootName1" class="col-sm-3 col-md-2 control-label">用户组名称</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="text" class="form-control" id="rootName1" v-model="editGroupName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 col-md-2 control-label">用户组权限</label>
                            <div class="col-sm-9 col-md-10">
                                <table class="table table-bordered table-condensed">
                                    <tbody>
                                        <tr>
                                            <th style="width:160px">一级权限</th>
                                            <th>二级权限</th>
                                        </tr>
                                        <tr v-for="(item,i) in menuList" :key="i">
                                            <td>
                                                <label class="checkbox-inline">
                                                    <input type="checkbox" :id="item.title" :value="item.title" v-model="editGroupRoles"> {{item.title}}
                                                </label>
                                            </td>
                                            <td>
                                                <label class="checkbox-inline" v-for="second in item.menuList" :key="second.title">
                                                    <input type="checkbox" :id="second.title" :value="second.title" v-model="editGroupRoles"> {{second.title}}
                                                </label>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="tips">
                                    提示：1、选择二级权限时必须选择对应的一级权限，否则不生效！<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、重新配置用户组权限后，所属用户组已登录用户的新权限不会立即生效，需要重新登录方可生效！
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" @click="cancleEditGroup">取消</button>
                    <button type="button" class="btn btn-primary" @click="saveEditGroup">保存更改</button>
                </div>
                </div>
            </div>
        </div>
        <!-- 警告框 -->
        <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">警告</h4>
                    </div>
                    <div class="modal-body">
                        你确定要删除吗？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" @click="()=>{delId='';delGroupId=''}">取消</button>
                        <button type="button" v-show="this.delId" class="btn btn-danger" @click="delSubmit">确认</button>
                        <button type="button" v-show="delGroupId" class="btn btn-danger" @click="delGroupSubmit">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="loading" v-show="!complete">
            <div class="spinner">
                <div class="spinner-container container1">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container2">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container3">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script src="./static/js/prism.js"></script>
    <script src="./static/js/spop.min.js"></script>
    <script>
        let tabs = {
            1: '添加账号',
            2: '账号列表',
            3: '添加用户组',
            4: '用户组列表',
        };
        var root = new Vue({
            el: '#root',
            data() {
                return {
                    //=============>通用<=================
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy年MM月dd日'),
                    week: this.timeFormat('D'),
                    baseUrl: api.baseUrl,
                    userData: store.fetch('userLoginInfo'),
                    tabCurrent: 1,
                    tabs: tabs,
                    complete: false,
                    roles: store.fetch('userLoginInfo').roles,
                    //==============>新增用户<================
                    userImg: '',//用户上传图片
                    userSelectImg: 'head.png',//用户选定图片
                    upimgurl: '',
                    userEditSelectImg: '',
                    addUserForm: {
                        name: '',
                        header_img: 'head.png',
                        rel_name: '',
                        password: '',
                        group_id: '',
                        create_name: 'admin',
                        rel_name: '',
                        group: ''
                    },
                    confirm: '',//确认密码
                    groupList: [],//用户组列表,
                    // ==============>账号列表<===============
                    userPages: [],//页数
                    total: 0,//总条数
                    userList: [],//用户列表
                    currentPage: 1,//当前页码
                    //修改用户
                    editUserForm: {
                        name: '',
                        header_img: '',
                        rel_name: '',
                        password: '',
                        group_id: '',
                        create_name: '',
                        rel_name: '',
                        group: '',
                        id: ''
                    },
                    confirm1: '',
                    delId: '',
                    //================>新增用户组<=============
                    menuList: [],//菜单列表
                    addRootMenuList: [],//新增用户组权限
                    addUserGroupName: '',
                    //编辑
                    editGroupId: '',
                    editGroupName: '',
                    editGroupRoles: [],
                    delGroupId: ''
                }
            },
            created() {

            },
            mounted() {
                this.init();
                // this.getUserGroupList();
                window.pageSet();
            },
            methods: {
                //================================>通用<====================================
                //初始化
                init() {
                    this.getDate();
                    if(this.menuConfig('添加账号')) {
                        this.tabClick(1);
                        return false;
                    }
                    if(this.menuConfig('账号列表')) {
                        this.tabClick(2);
                        return false;
                    }
                    if(this.menuConfig('新增用户组')) {
                        this.tabClick(3);
                        return false;
                    }
                    if(this.menuConfig('用户组管理')) {
                        this.tabClick(4);
                        return false;
                    }
                },
                //权限判断
                menuConfig(menuName) {
                    let re = new RegExp(menuName);
                    return re.test(this.roles);
                },
                tabClick(i) {
                    this.tabCurrent = i;
                    this.complete = false;
                    if(i === 1) {
                        this.addUserInit();
                    }
                    if(i === 2) {
                        this.userListInit();
                    }
                    if(i === 3) {
                        this.addUserGroupInit()
                    }
                    if(i === 4) {
                        this.userGroupInit();
                    }
                },
                //添加账号初始化
                addUserInit() {
                    // this.getMenu();
                    this.getUserGroupList();
                    this.userImg = ''
                },
                //账号列表初始化
                userListInit() {
                    this.getUserList();
                },
                //新增用户组初始化
                addUserGroupInit() {
                    this.getMenu();
                },
                //用户组管理初始化
                userGroupInit() {
                    this.getMenu();
                    this.getUserGroupList();
                },
                //时间格式化
                timeFormat(fmt) {
                    let date = new Date();
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    };
                    var o = { 
                        "M+" : date.getMonth()+1,     //月份 
                        "d+" : date.getDate(),     //日 
                        "h+" : date.getHours(),     //小时 
                        "m+" : date.getMinutes(),     //分 
                        "s+" : date.getSeconds(),     //秒 
                        "q+" : Math.floor((date.getMonth()+3)/3), //季度 
                        "S" : date.getMilliseconds(),    //毫秒
                        "D" : week[date.getDay()]
                    }; 
                    if(/(y+)/.test(fmt)) 
                    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
                    for(var k in o) 
                    if(new RegExp("("+ k +")").test(fmt)) 
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
                    return fmt;
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy年MM月dd日');
                        this.week = this.timeFormat('D')
                    },1000)
                },

                //登出
                logout() {
                    store.clear('userLoginInfo');
                    store.clear('userData');
                    window.location.href = '/login.html';
                },

                //================================>添加账号<==================================

                //选择头像
                imgSelect(imgUrl) {
                    this.userSelectImg = imgUrl;
                    this.addUserForm.header_img = imgUrl;
                },
                imgSelect1(imgUrl) {
                    this.userEditSelectImg = imgUrl;
                    this.editUserForm.header_img = imgUrl;
                },

                //用户上传头像
                userUpdateImg(e) {
                    this.imgUpload(e)
                },

                //获取用户组列表
                getUserGroupList() {
                    api.getGroupList().then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            this.groupList = res.data.data;
                        }
                    })
                },

                //提示通知
                notice(title,msg,type) {
                    spop({
                        template: '<h4 class="spop-title">'+title+'</h4>'+msg,
                        style: type,
                        autoclose: 3000
                    });
                },

                //图片文件上传
                imgUpload(e) {
                    let formData = new FormData();
                    let file = e.target.files[0];
                    if(!file) {
                        return false
                    }
                    formData.append('fileName',file);
                    api.upload(formData).then(res => {
                        if(res.data.status == 'success') {
                            this.userImg = file.name;
                            this.notice('提示','图片上传成功','success')
                        }else {
                            this.notice('错误','图片上传失败','error')
                        }
                    }).catch(err => {
                        this.notice('错误','图片上传失败','error')
                    });
                    e.target.value = '';
                },

                //保存
                addUser() {
                    if(!this.addUserForm.name) {
                        this.notice('错误','请填写用户名！','error');
                        this.$refs.addName.focus();
                        return false;
                    };
                    if(!this.addUserForm.rel_name) {
                        this.notice('错误','请填写真实姓名！','error');
                        this.$refs.addRelname.focus();
                        return false;
                    };
                    if(!this.addUserForm.password) {
                        this.notice('错误','请填写密码！','error');
                        this.$refs.addPassword.focus();
                        return false;
                    };
                    if(!this.confirm) {
                        this.notice('错误','请填写确认密码！','error');
                        this.$refs.addConfirm.focus();
                        return false;
                    }else if(this.confirm != this.addUserForm.password){
                        this.notice('错误','两次输入的密码不一致，请重新输入！','error');
                        this.confirm = '';
                        this.addUserForm.password = '';
                        this.$refs.addPassword.focus();
                        return false;
                    };
                    if(!this.addUserForm.group) {
                        this.notice('错误','请选择用户组！','error');
                        this.$refs.addUserGroup.focus();
                        return false;
                    };
                    let body = {
                        creatorName: this.addUserForm.create_name,
                        groupId: this.addUserForm.group.groupId,
                        groupName: this.addUserForm.group.groupName,
                        password: this.addUserForm.password,
                        realName: this.addUserForm.rel_name,
                        userHeader: this.addUserForm.header_img,
                        userName: this.addUserForm.name
                    };
                    api.addUser(body).then(res => {
                        if(res.data.status == 'success') {
                            this.notice('提示','添加成功！','success');
                            this.addUserForm = {
                                name: '',
                                header_img: 'head.png',
                                rel_name: '',
                                password: '',
                                group_id: '',
                                create_name: 'admin',
                                rel_name: '',
                                group: ''
                            };
                            this.confirm = '';
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '添加账号',
                                moduleName: '账号管理',
                                operation: '添加账号'
                            }
                            this.recordLog(body)
                        }else {
                            this.notice('错误',res.data.data.errMsg,'error');
                            return false;
                        }
                    }).catch(err => {
                        this.notice('错误','服务器开小差了，请稍后再试！','error');
                    })
                },

                //=============================>账号列表<=============================
                //点击页码
                selectPage(i) {
                    this.currentPage = i;
                    this.getUserList();
                },
                //上一页
                topPage() {
                    if(this.currentPage === 1) {
                        return false;
                    }
                    this.currentPage --;
                    this.getUserList();
                },
                //下一页
                nextPage() {
                    if(this.currentPage === this.userPages[this.userPages.length-1]) {
                        return false;
                    }
                    this.currentPage++;
                    this.getUserList();
                },
                //获取数据
                getUserList() {
                    let body = {
                        pageSize: 10,
                        pageNum: this.currentPage
                    }
                    this.complete = false;
                    api.getUserList(body).then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            let data = res.data.data.list;
                            for (const i in data) {
                                if(data[i].createTime) {
                                    data[i].createTime = data[i].createTime.split(' ')[0];
                                }
                            }
                            this.userList = data;
                            this.userPages = res.data.data.navigatepageNums;
                            this.total = res.data.data.total;
                        }
                    });
                },

                //编辑用户
                editUserConfig(item) {
                    this.userImg = ''
                    this.editUserForm.name = item.userName;
                    this.editUserForm.header_img = item.userHeaderImage;
                    this.editUserForm.password = item.password;
                    this.editUserForm.group_id = item.groupId;
                    this.editUserForm.group = {
                        groupName: item.groupName,
                        groupId: item.groupId
                    };
                    this.editUserForm.create_name = item.createName;
                    this.editUserForm.rel_name = item.realName;
                    this.confirm1 = item.password;
                    this.userEditSelectImg = item.userHeaderImage;
                    this.editUserForm.id = item.id
                    if(!(this.userEditSelectImg == 'head.png' || this.userEditSelectImg == 'head01 (1).jpg' || this.userEditSelectImg == 'head01 (2).jpg'|| this.userEditSelectImg == 'head01 (3).jpg'|| this.userEditSelectImg == 'head01 (4).jpg'|| this.userEditSelectImg == 'head01 (4).jpg')) {
                        this.userImg = this.userEditSelectImg
                    }
                },
                //取消编辑
                cancleEdit() {
                    this.editUserForm = {
                        name: '',
                        header_img: '',
                        rel_name: '',
                        password: '',
                        group_id: '',
                        create_name: '',
                        rel_name: '',
                        group: '',
                        id: ''
                    },
                    this.userEditSelectImg = '';
                },
                //保存编辑
                editSubmit() {
                    let body = {
                        creatorName: this.editUserForm.create_name,
                        groupId: this.editUserForm.group.groupId,
                        groupName: this.editUserForm.group.groupName,
                        password: this.editUserForm.password,
                        realName: this.editUserForm.rel_name,
                        userHeader: this.editUserForm.header_img,
                        userName: this.editUserForm.name,
                        id: this.editUserForm.id
                    }
                    this.complete = false;
                    api.editUser(body).then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            this.notice('提示','修改成功！','success');
                            $('#editUser').modal('hide');
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '账号列表',
                                moduleName: '账号管理',
                                operation: '修改账号'
                            }
                            this.recordLog(body)
                        }
                        this.getUserList();
                    })
                    
                },
                //删除用户
                delUser(id) {
                    this.delId = id;
                },
                delSubmit() {
                    let body = {
                        id: this.delId
                    };
                    this.complete = false;
                    api.delUser(body).then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            this.notice('提示','删除成功！','success');
                            $('#delModal').modal('hide');
                            this.getUserList()
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '账号列表',
                                moduleName: '账号管理',
                                operation: '删除账号'
                            }
                            this.recordLog(body)
                        }else {
                            this.notice('提示','删除失败！','error');
                            $('#delModal').modal('hide');
                        }
                    }).catch(err => {
                        this.complete = true;
                        this.notice('提示','服务器开小差了，请稍后再试！','error');
                    })
                },
                //=============================>新增用户组<=============================
                getMenu() {
                    this.complete = false;
                    api.getMenuList().then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            let data = res.data.data;
                            this.menuList = data;
                            let add = {
                                title: '新增'
                            }
                            this.menuList.push(add)
                        }
                    }).catch(err => {
                        this.notice('提示','服务器开小差了，请稍后再试！','error');
                    })
                },
                saveUserGroup() {
                    if(!this.addUserGroupName) {
                        this.notice('提示','请填写用户组名称！','error');
                        this.$refs.rootName.focus()
                    }
                    if(this.addRootMenuList.length < 1) {
                        this.notice('提示','请至少选择一项权限！','error');
                    }
                    let userAuthority = this.addRootMenuList.join(',');
                    let userGroupName = this.addUserGroupName;
                    let body = {
                        userAuthority,
                        userGroupName
                    }
                    this.complete = false;
                    api.addUserGroup(body).then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            this.notice('提示','添加成功！','success');
                            this.addRootMenuList = [];
                            this.addUserGroupName = '';
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '新增用户组',
                                moduleName: '账号管理',
                                operation: '新增用户组'
                            }
                            this.recordLog(body)
                        }else {
                            this.notice('提示','添加失败！','error');
                        }
                    }).catch(err => {
                        this.complete = true;
                        this.notice('提示','服务器开小差了，请稍后再试！','error');
                    })
                },

                //=================================>用户组管理<==================================
                editGroup(item) {
                    this.editGroupId = item.id;
                    this.editGroupName = item.groupName;
                    this.editGroupRoles = item.userAuthority.split(',')
                },
                cancleEditGroup() {
                    this.editGroupId = '';
                    this.editGroupName = '';
                    this.editGroupRoles = [];
                },
                saveEditGroup() {
                    let body = {
                        id: this.editGroupId,
                        userAuthority: this.editGroupRoles.join(','),
                        userGroupName: this.editGroupName
                    }
                    this.complete = false;
                    api.edieUserGroup(body).then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            this.notice('提示','修改成功！','success');
                            $('#editRoot').modal('hide');
                            this.getUserGroupList()
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '用户组管理',
                                moduleName: '账号管理',
                                operation: '修改用户组'
                            }
                            this.recordLog(body)
                        }else {
                            this.notice('提示','修改失败！','error');
                        }
                    }).catch(err => {
                        this.complete = true;
                        this.notice('提示','服务器开小差了，请稍后再试！','error');
                    })
                },
                delGroup(id) {
                    this.delGroupId = id;
                    $('#delModal').modal('show');
                },
                delGroupSubmit() {
                    let body = {
                        id: this.delGroupId
                    }
                    this.complete = false;
                    api.delGroup(body).then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            this.notice('提示','删除成功！','success');
                            $('#delModal').modal('hide');
                            this.getUserGroupList()
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '用户组管理',
                                moduleName: '账号管理',
                                operation: '删除用户组'
                            }
                            this.recordLog(body)
                        }else {
                            this.notice('提示','删除失败！','error');
                            $('#delModal').modal('hide');
                        }
                    }).catch(err => {
                        this.complete = true;
                        this.notice('提示','服务器开小差了，请稍后再试！','error');
                    })
                },
                recordLog(body,fn=false) {
                    api.updateLog(body).then(res => {
                        if(fn) {
                            let newFN = new Function(fn);
                            newFN();
                        }
                    }).catch(err => {
                        console.error(err)
                    })
                },
            }
        })
    </script>
</body>
</html>